<!-- 开发tms2.0时，客户的下拉框数据过多，造成页面卡顿。得采用虚拟列表 -->
<!-- 但是使用了虚拟列表后，弹框宽度没有自适应内容展开，客户名称很长需展示完整。非虚拟版会自适应内容。解决-设置属性 :fit-input-width="false"  -->
<!-- 需要自定义 弹框模板内容： 代码-客户简称 -->
<!-- 需要自定义 选中的内容: 客户简称-->
<template>
  <el-select-v2
    v-model="value"
    :options="options"
    multiple
    filterable
    placeholder="Please select"
    style="width: 240px"
    :fit-input-width="false"
    collapse-tags
    collapse-tags-tooltip
    max-collapse-tags="5"
    scrollbar-always-on>
    <template #label="{ label, value }">
      <el-tag>{{ label }}</el-tag>
    </template>
    <template #default="{ item }">
      <el-tag>{{ item.code }}</el-tag
      >-
      <span>{{ item.label }}</span>
    </template>
  </el-select-v2>
</template>

<script lang="ts" setup>
import { ref } from 'vue'

const initials = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j']

const value = ref()
const options = Array.from({ length: 10000 }).map((_, idx) => ({
  code: `code ${idx + 1}`,
  value: `Option ${idx + 1}`,
  label: `${initials[idx % 10]}${idx}12131231231231231231231231231231超级长的labele231231231`,
}))
</script>
